.category {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .search {
    height: 88px;
    // width: 100%;
    padding: 0 30px;
    background: #fff;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ededed;
    flex-direction: row;
    .ser {
      width: 690px;
      height: 56px;
      background: #ededed;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      span {
        display: inline-block;
      }

      .icon {
        background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png")
          center no-repeat;
        background-size: 100%;
        width: 28px;
        height: 28px;
        margin-right: 10px;
      }
    }
  }

  .content {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: row;
    .left {
      width: 162px;
      height: 100%;
      overflow-y: auto;
      .iconText {
        text-align: center;
        line-height: 90px;
        width: 162px;
        height: 90px;
        color: #333;
        font-size: 28px;
        justify-content: center;
        align-items: center;
        border-left: 6px solid #fff;
      }

      .active {
        color: #ab2b2b;
        font-size: 36px;
        border-left: 6px solid #ab2b2b;
      }
    }

    .right {
      flex: 1;
      border-left: 1px solid #fafafa;
      height: 100%;
      padding: 0 30px 0 30px;
      overflow-y: auto;
      .banner {
        width: 100%;
        height: 222px;
        margin-top: 20px;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      .title {
        text-align: center;
        padding: 20px 0;
        align-items: center;
        justify-content: center;
        span:nth-child(2) {
          font-size: 24px;
          color: #333;
          padding: 0 10px;
        }

        span:nth-child(2n + 1) {
          color: #999;
        }
      }

      .bottom {
        display: flex; // justify-content: space-between;
        flex-wrap: wrap;
        flex-direction: row;
        .item {
          width: 33.33%;
          margin-bottom: 20px;
          p {
            text-align: center;
          }
          .img {
            height: 144px;
            width: 144px;
            display: block;
            margin: 0 auto;
          }
        }
      }
    }
  }
}
